<template>
	<!-- 升级VIP -->
	<view>
		<view class="constbox">
			<my-head title="升级VIP" :right="true" text_right="购买记录" :bg="transparent" :color="color"
				@clickRight="clickRight" :zIndex="99999" :textrightcolor='color'
				:textrightfontSize='textrightfontSize'></my-head>
			<view class="viptop" v-if="listdata">

				<view class="putongTab">
					<view class="putongTab1">
						<view v-for="(item,index) in listdata" class="putongidBox">
							<view class="putongid" :class="tabid.Id==item.Id? 'putongid1' : 'putongid' ">
								<view class="tabItem">
									<view class="text" @click="tabclick(item)">
										{{item.Title}}
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="putongnr" v-if="listnrdata">
					<template v-for="(e,index) in listnrdata">
						<view class="putongli" v-if="e.Display==1">
							<view class="textnr color1">{{e.Title}}</view>
							<view class="textnr color2"> {{e.Value==-1?'不限': e.Value}} {{e.Unit}}</view>
						</view>
					</template>
				</view>

				<view v-if="tabid">
					<view class="taocan" v-if="tabid.IsApply==1 || tabid.IsBuyPlan==true">
						<view class="oneYearBox" v-for="(item,index) in Relationsdata" :key="index"
							:class="istab==index ? 'oneMonthBox' : 'oneYearBox' " @click="clickTaoCan(item,index)">
							<view class="xuanzhong" :class="istab==index? 'xuanzhong' : 'xuanzhong1' ">
								{{item.DurationStr}}
							</view>
							<view class="jiage">
								<text>￥</text>
								<text>{{item.Price}}</text>
							</view>
							<view class="biaoqian" v-if="istab==index">限时特惠</view>
						</view>
					</view>
					<view class="beizhu" v-if="Relationsdata[istab].Remark">
						<text>
							{{Relationsdata[istab].Remark}}
						</text>
					</view>
				</view>


				<view class="content">
					<view class="content-box">
						<view class="tequanTitle">
							<view class="box"></view>
							<view class="title">
								升级慧人才普通VIP，畅享
								<text style="font-size: 30rpx;padding: 0rpx 5rpx;">{{shudatdlistnrdata}}</text>
								大专属特权
							</view>
							<view class="box"></view>
						</view>
						<view v-for="(e,index) in  listnrdata" v-if="listnrdata">

							<view class="tequan" v-if="e.Display==1">
								<view class="viewimge">
									<image :src="URL+e.Icon" class="tequanimge"></image>
								</view>
								<view class="tequanview">
									<view class="tepview">{{e.Introduction}}</view>
									<view>{{e.Description}}</view>
								</view>
							</view>

						</view>
					</view>
				</view>

				<view style="height: 200rpx;"></view>
			</view>
		</view>

		<view v-if="tabid">

			<view class="btnbox" v-if="tabid.IsApply">
				<view class="btn" @click="clickBuy">
					<text>￥</text>
					<text>{{Relationsdata[istab].Price}}</text>
					<text>/{{Relationsdata[istab].DurationStr}}，
						<text v-show="!tabid.IsBuyPlan">
							立即购买
						</text>
						<text v-show="tabid.IsBuyPlan">
							立即续费
						</text>
						VIP
					</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import myHead from '@/pages/component/baseHead.vue'
	export default {
		data() {
			return {
				HasVip: false,
				URL: this.$config.domain.staticUrl,

				transparent: '#19295C',
				color: '#FFFFFF',
				textrightfontSize: '28rpx',

				tabid: null,
				priceid: null, //套餐选择
				tab: false,
				istab: 0, //是否默认选中菜单
				listdata: [],
				listnrdata: [],
				Relationsdata: [], //会员购买选项

			}
		},
		components: {
			myHead,
		},
		computed: {
			shudatdlistnrdata() {
				let data = 0;
				this.listnrdata.forEach(res => {
					if (res.Display == 1) {
						data++;
					}
				})
				return data;
			}
		},
		onLoad(o) {
			this.tclsitdatda();
		},
		onShow() {},
		created() {},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			// 监听页面滚动，设置标题栏背景色
			if (e.scrollTop > 10) {
				this.transparent = '#19295C'
			} else {
				this.transparent = 'transparent'
			}
		},

		methods: {
			tclsitdatda() {
				const app = getApp();
				const userRole = app.globalData.userRole; // 当前角色 0求职者 1招聘者
				// console.log(app.globalData);
				// console.log(userRole);
				let obj = {
					PlanType: "", //套餐类型 1企业 2个人
					ObjectID: "" //ID 套餐类型=1 传企业ID 套餐类型=2 传用户ID
				}

				if (userRole == 1) {
					// 招聘者
					obj = {
						PlanType: 1,
						ObjectID: app.globalData.currentCorp.Id,
					}
				} else if (userRole == 0) {
					// 求职者
					obj = {
						PlanType: 2,
						ObjectID: app.globalData.user.UserId
					}
				}

				this.$http.huirc.getPlanList(obj).then(res => {
					if (res.Success) {
						this.listdata = res.Result;
						if (res.Result) {
							// console.log(res);
							res.Result.forEach((resd, index) => {
								if (resd.IsBuyPlan) {
									// resd.Relations((itt,ind)=>{
									// 	if(itt.IsDefault){

									// 	}
									// })
									this.tabid = resd;
									// if (index === 1) {
									// this.tab = true
									// } else if (index === 0) {
									// 	this.tab = true
									// }

								}
							})
						}

						if (!this.tabid) {
							this.tabid = res.Result[0];
							this.tab = false
						}

						this.listnrtextdata();
					}
				})
			},
			listnrtextdata() {
				let dadta = [];
				let dadta1 = [];
				if (this.listdata) {
					this.listdata.forEach(res => {
						if (this.tabid.Id == res.Id) {
							dadta = res.Items
							dadta1 = res.Relations
						}
					})

				}
				this.listnrdata = dadta
				this.Relationsdata = dadta1
				this.Relationsdata.forEach((item, index) => {
					if (item.IsDefault) {
						this.istab = index
					}
				})
			},
			tabclick(item) {
				if (this.tabid.Id != item.Id) {
					this.tabid = item;
					// this.tab = !this.tab;
					this.listnrtextdata();
				}
			},
			clickTaoCan(item, index) {
				if (this.istab == index) return
				this.istab = index;
				// this.listnrtextdata();
			},
			// 跳转购买记录
			clickRight() {
				uni.navigateTo({
					url: "/pages/views/packageB/type-jobhunting/upgradevip/purchaseRecord"
				})
			},
			// 购买
			clickBuy() {
				if (this.tabid.Id) {
					this.Relationsdata[this.istab].Title = this.tabid.Title + this.Relationsdata[this.istab].DurationStr
					uni.navigateTo({
						url: "/pages/views/packageB/Publicdocuments/index?tcid=" + JSON.stringify(this
							.Relationsdata[this.istab])
					})
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.constbox {
		background-image: url('@/static/image/shenjivip/sjvipbg.png');
		background-repeat: no-repeat;
		background-size: cover;
		backgroundSize: 100% 100px;
		height: 350rpx;
		width: 100%;
		position: relative;
		box-sizing: border-box;

		.viptop {
			width: 100%;
			position: absolute;

			.putongTab {
				margin: 0rpx 40rpx;

				background-repeat: no-repeat;
				background-size: 100% 100%;
				box-sizing: border-box;

				.putongTab1 {

					display: flex;
					background-color: #283465;
					border-radius: 20rpx 20rpx 0rpx 0rpx;
					justify-content: space-between;
					align-items: center;
					border: none;




					.putongidBox {
						width: 33%;

						.putongid {
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							height: 100%;
							box-sizing: border-box;

							.tabItem {
								padding: 20rpx 50rpx;
								text-align: center;

								.text {
									font-size: 26rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 700;
									color: #fff !important;
								}
							}
						}

						.putongid1 {
							border-radius: 20rpx 20rpx 0rpx 0rpx;
							background-image: linear-gradient(#F6DDCF, #fff);
							box-sizing: border-box;
							border: 1rpx solid #fff;

							.tabItem {
								padding: 24rpx 50rpx;
								text-align: center;
								box-sizing: border-box;

								.text {
									font-size: 26rpx;
									font-family: PingFang SC-Medium, PingFang SC;
									font-weight: 700;
									color: #283465 !important;

								}
							}
						}


					}
				}





			}

			.putongnr {
				background-color: #fff;
				margin: 0rpx 40rpx;
				box-shadow: 0rpx 3rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
				border-radius: 0rpx 0rpx 20rpx 20rpx;
				box-sizing: border-box;
				border: 1rpx solid #fff;

				.putongli {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 30rpx;

					.textnr {
						min-width: 30%;
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}

			.taocan {
				display: flex;
				justify-content: space-between;
				align-items: center;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin: 40rpx 40rpx 0;
				box-sizing: border-box;

				.oneYearBox {
					height: 168rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					opacity: 1;
					border: 4rpx solid #E7EAEC;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 48%;
					position: relative;
				}

				.oneMonthBox {
					height: 168rpx;
					background: #FBF5F2;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					opacity: 1;
					border: 4rpx solid #EEB092;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 48%;
					position: relative;

				}

				.biaoqian {
					position: absolute;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					width: 120rpx;
					height: 48rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(133deg, #EB7A6E 0%, #EA152F 100%);
					border-radius: 20rpx 0rpx 20rpx 0rpx;
					opacity: 1;
					top: -4rpx;
					left: -4rpx;
				}


			}

			.beizhu {
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				padding: 20rpx 40rpx 0;
			}
		}
	}

	.xuanzhong {
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #EEB093;
	}

	.xuanzhong1 {
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
	}


	.jiage {
		display: flex;
		align-items: baseline;
		justify-content: center;

		text:first-child {
			font-size: 26rpx;
			font-family: DIN-Regular, DIN;
			font-weight: 400;
			color: #D9743E;

		}

		text:last-child {
			font-size: 48rpx;
			font-family: DIN-Regular, DIN;
			font-weight: 400;
			color: #D9743E;

		}
	}






	.color1 {
		color: #000000;
	}

	.color2 {
		color: #D9743E;
		text-align: center;
	}

	.content {
		padding: 40rpx;

		.content-box {
			background: linear-gradient(204deg, #F9F1EC 0%, #FFFDFD 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			padding: 30rpx;

			.tequanTitle {
				text-align: center;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 20rpx 20rpx;

				.box {
					width: 22rpx;
					height: 20rpx;
					opacity: 1;
					background-image: url('@/static/image/shenjivip/sijiaoxing.png');
					background-repeat: no-repeat;
					background-size: cover;
				}

				.title {
					font-size: 26rpx;
					font-weight: bold;
					color: #563726;
					white-space: nowrap;
					background-image: url();
				}

				.box1 {
					width: 76rpx;
					height: 4rpx;
					background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #283465 100%);
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
				}
			}

			.tequan {
				display: flex;
				padding: 20rpx;
				background-color: #fff;
				margin: 40rpx 0;
				border-radius: 10rpx;

				.viewimge {
					padding: 20rpx;

					.tequanimge {
						width: 74rpx;
						height: 74rpx;
					}
				}

				.tequanview {
					font-size: 24rpx;

					.tepview {
						font-weight: bold;
						padding: 10rpx 0rpx;
					}
				}
			}

		}
	}

	.btnbox {
		position: fixed;
		background-color: #fff;
		bottom: 0;
		width: 100%;
		height: 150rpx;
		text-align: center;

		.btn {
			background: linear-gradient(90deg, #FEEDE5 0%, #F5C4A9 100%);
			border-radius: 100rpx;
			opacity: 1;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			margin: 25rpx 30rpx;
			box-sizing: border-box;
		}
	}
</style>